<script setup>
import {ref,onMounted} from "vue"
import axios from "axios"

onMounted(()=>{
    document.title = "音频投稿"
})

//resources
import music_file_svg from "../../../../public/icons/home/music_file.svg"
import music_file from "../../../../public/images/music/music_file.png"
import music_file_image from "../../../../public/images/music/music_add_image.png"
import { router } from "../../../router"

//正则表达式
let regex = /(.*?)\.(mp3|flac)/;
const http = "http"
const local = "localhost"
const port = 8091
//refs
const masterBox1_Ref = ref(null)
const kt_img_ref = ref(null)
const btnBox_Ref = ref(null)
const uploading_imageBox_Ref = ref(null)
const uploading_fileTitleNameBox_Ref = ref(null)
const upload_music_audition = ref(null)

const music_file_name = ref('')
const file_cast_name = ref('')
const music_file_audio = ref('')//获取上传音乐路径的变量
const music_audition = ref("试听")
const formatDateTimeName = ref("")
const formatDateMusicImage = ref("")

const upload_music_btn = async() => {
    const fileHandle = await window.showOpenFilePicker({
        excludeAcceptAllOption: false,
        types: [
            {
                description: '音频文件',
                accept: {
                    'audio/*': ['.mp3', '.wma', '.flac']
                },
            },
        ],
    });
    const file = await fileHandle[0].getFile();
    if(file.name != null){
        masterBox1_Ref.value.style.zIndex=-1
        kt_img_ref.value.style.zIndex = -1
        btnBox_Ref.value.style.zIndex = -1
        masterBox1_Ref.value.style.opacity = 0
        kt_img_ref.value.style.opacity = 0
        btnBox_Ref.value.style.opacity = 0

        uploading_imageBox_Ref.value.style.zIndex = 2
        uploading_fileTitleNameBox_Ref.value.style.zIndex = 2
        uploading_imageBox_Ref.value.style.opacity = 1
        uploading_fileTitleNameBox_Ref.value.style.opacity = 1
    }else{
        masterBox1_Ref.value.style.zIndex=2
        kt_img_ref.value.style.zIndex = 2
        btnBox_Ref.value.style.zIndex = 2
        masterBox1_Ref.value.style.opacity = 1
        kt_img_ref.value.style.opacity = 1
        btnBox_Ref.value.style.opacity = 1

        uploading_imageBox_Ref.value.style.zIndex = -1
        uploading_fileTitleNameBox_Ref.value.style.zIndex = -1
        uploading_imageBox_Ref.value.style.opacity = 0
        uploading_fileTitleNameBox_Ref.value.style.opacity = 0
    }

    const formData = new FormData();
    formData.append('file', file);

    await fetch('http://localhost:8091/upload-music', {
      method: 'POST',
      body: formData
    }).then(res=>{return res.json()}).then(async data=>{
        console.log(data)
        music_file_name.value = await data.file_name
        music_file_name.value = await music_file_name.value.substring(35,100)
        file_cast_name.value = await music_file_name.value
        var match = regex.exec(file_cast_name.value);
        file_cast_name.value = match[1];
        music_file_audio.value = await data.file_name
        document.title = "音频投稿-"+ file_cast_name.value
    });
}

const upload_music_image = async() => {
    const fileHandle = await window.showOpenFilePicker({
        excludeAcceptAllOption: false,
        types: [
            {
                description: '图片文件',
                accept: {
                    'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp']
                },
            },
        ],
    });
    const file = await fileHandle[0].getFile();
    console.log(file)
    const formData = new FormData();
    formData.append('file', file);
    await fetch('http://localhost:8091/upload-music-image', {
      method: 'POST',
      body: formData
    }).then(res=>{return res.json()}).then(async data=>{
        console.log(data)
        formatDateTimeName.value = await data
        formatDateMusicImage.value = await data.file_name
    });
}

const audition_player = () => {
    if(upload_music_audition.value.paused){
        upload_music_audition.value.play()
        music_audition.value = "暂停试听"

    }else{
        upload_music_audition.value.pause()
        music_audition.value = "试听"
    }
}

const handleAudioEnded = function(){
    music_audition.value = "试听"
}

const upload_musicfile_btn = async() => {
    axios.post(`${http}://${local}:${port}/music_post_handler`,{
        data:{
            file_name: music_file_name.value,
            file_image: formatDateMusicImage.value,
            file_cast_name: file_cast_name.value,
            url: music_file_audio.value
        }
    }).then(res=>{
        //创建成功
        console.log(res.data)
        if(res.data != null){
            router.replace('/admin-upload/admin-upload-page-success')
        }
    }).catch(err=>console.log(err))
}

const isNotUload = ref(true)
</script>

<template>
    <div class="upload_music_all">
        <div class="upload_music_masterBox1" ref="masterBox1_Ref">
            <div class="upload_music_bg"></div>
        </div>
        <div class="kt_img" ref="kt_img_ref"></div>
        <div class="upload_music_btnBox" ref="btnBox_Ref">
            <div class="upload_music_btn_imageBox"><img :src="music_file_svg" alt=""></div>
            <div class="upload_music_btnBox_fenge"><div class="upload_music_btnBox_fenge1"></div></div>
            <div class="upload_music_btnBox_NameBox" @click="upload_music_btn">
                <div class="upload_music_btnBox_Name">
                    <p class="scdq">{{ "上传单曲" }}</p>
                    <p class="plaseuload1">{{ "请上传MP3、WMA、FLAC格式" }}</p>
                </div>
            </div>
        </div>
        <div class="uploading_imageBox" ref="uploading_imageBox_Ref">
            <img :src="music_file_image" alt="" @click="upload_music_image" v-if="formatDateMusicImage == ''"/>
            <img :src="formatDateMusicImage" alt="" v-else />
            <img :src="music_file" alt="" />
            <span class="music_file_name">{{ music_file_name }}</span>
            <span class="music_file_audition" @click="audition_player">{{ music_audition }}</span>
            <!-- @ended:播放完毕执行的函数 -->
            <audio :src="music_file_audio" ref="upload_music_audition" @ended="handleAudioEnded">
                <source :src="music_file_audio" type="audio/mp3">
                <source :src="music_file_audio" type="audio/flac">
            </audio>
        </div>

        <div class="uploading_fileTitleNameBox" ref="uploading_fileTitleNameBox_Ref">
            <p class="uploading_fileTitleNameTitle">{{ "稿件标题" }}</p>
            <input type="text" placeholder="" v-model="file_cast_name"/>
            <div @click="upload_musicfile_btn" class="subBtn">{{ "提交稿件" }}</div>
        </div>
        <!-- <div class="test">
            <img :src="music_file" alt="">
        </div> -->
        <!-- <div class="upload_music_masterBox2"></div> -->
    </div>
</template>

<style scoped>
.upload_music_all{
    width: 100%;
    height: 100%;
}
.upload_music_masterBox1{
    width: 100%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.upload_music_bg{
    width: 50%;
    height: 80%;
    background:url('../../../../public/images/music/bg_upload.png');
    background-repeat: no-repeat;
    user-select: none;
}
.kt_img{
    position: absolute;
    left: 500px;
    top: 130px;
    width: 170px;
    height: 190px;
    background: url('../../../../public/images/music/music-theme.png');
    background-repeat: no-repeat;
    z-index: 3;
    user-select: none;
    transition: all 0.2s;
}
.upload_music_btnBox{
    position: absolute;
    left: 550px;
    top: 180px;
    width: 400px;
    height: 100px;
    background: rgb(0, 161, 214);
    z-index: 2;
    border-radius: 50px;
    user-select: none;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}
.upload_music_btn_imageBox{
    width: 35%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upload_music_btn_imageBox img{
    margin-left: 40px;
    width: 50%;
    height: 50%;
}
.upload_music_btnBox_fenge{
    width: 1%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.upload_music_btnBox_fenge1{
    width: 40%;
    height: 40%;
    background: rgb(255, 255, 255);
    z-index: 5;
    border-radius: 50px;
}
.upload_music_btnBox_NameBox{
    width: 63%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.upload_music_btnBox_Name{
    width: 75%;
    height: 90%;
}
.upload_music_btnBox_Name .scdq{
    font-size: 22px;
    color: #fff;
    margin-top: 18px;
}
.upload_music_btnBox_Name .plaseuload1{
    font-size: 12px;
    color: #fff;
}

.uploading_imageBox{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 10%;
    opacity: 0;
    /* background-color: red; */
}
.uploading_imageBox img:nth-child(1){
    position: absolute;
    left: 100px;
    top: 50px;
    width: 150px;
    height: 150px;
}
.uploading_imageBox img:nth-child(2){
    position: absolute;
    left: 300px;
    top: 20px;
    /* width: ; */
}
.music_file_name{
    position: absolute;
    left: 360px;
    top: 30px;
}
.music_file_audition{
    position: absolute;
    left: 1000px;
    top: 30px;
    width: 100px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(200, 200, 200, 0.5);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}
.music_file_audition:hover{
    color: rgb(0, 94, 214);
    border: 2px solid rgb(0, 94, 214);
}

.uploading_fileTitleNameBox{
    position: absolute;
    left: 19%;
    top: 10%;
    width: 45%;
    height: 20%;
    opacity: 0;
}
.uploading_fileTitleNameTitle{
    font-size: 20px;
    font-weight: 700;
}
.uploading_fileTitleNameBox input{
    margin-top: 20px;
    outline: none;
    width: 60%;
    height: 15%;
    font-size: 15px;
    border-radius: 5px;
    border: 2px solid rgb(200,200,200);
}
.uploading_fileTitleNameBox input:focus{
    border-radius: 5px;
    border: 2px solid rgb(0, 94, 214);
}
.subBtn{
    position: absolute;
    left: 700px;
    top: 30px;
    width: 100px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #00a1d6;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 15px;
    background-color: #00a1d6;
    color: #fff;
}
</style>